
<template>
  <div class="shopping-list">
    <div class="list-header">
      <input @change="selectAll" :checked="check" class="item-checkbox" type="checkbox">
      <span>{{ detailList[0].hotel }}</span>
    </div>
    <div class="list-item" v-for="item in detailList" :key="item.id">
      <input class="item-checkbox" type="checkbox" :checked="item.done" @change="changeChecked" :id="item.id">
      <div class="item-container">
        <div class="item-content">
          <div class="item-img"></div>
          <div class="item-info">
            <p class="info-name">{{ item.name }}</p>
            <p class="info-number">仅剩{{ item.number }}件</p>
            <p class="info-price">￥<span>{{ item.price }}</span></p>
          </div>
        </div>
        <div class="item-calculate">
          <span class="calculate-dec" @click="calculate(false, item)">-</span>
          <span class="calculate-count">{{ item.count }}</span>
          <span class="calculate-inc" @click="calculate(true, item)">+</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapState, mapActions} from 'vuex'
export default {
    name: 'ShoppingListItem',
    created() {
      this.getDetailList()
    },
    computed: {
      ...mapState(['detailList']),
      finshChecked() {
        return this.detailList.reduce((prev, current) => prev + (current.done ? 1 : 0), 0)
      },
      check() {
        return this.detailList && this.detailList.length == this.finshChecked
      }
    },
    methods: {
      ...mapActions(['getDetailList']),
      calculate(flag, item) {
        this.$store.commit('calculateCount', {flag, item})
        if(item.count < 1) {
          alert('数量不能小于1');
          item.count = 1;
        }
      },
      selectAll(e) {
        this.detailList.forEach(item => {
          item.done = e.target.checked;
        });
        console.log(this, 'this');
      },
      changeChecked(e) {
        this.detailList.forEach(item => {
          if(item.id == e.target.id) {
            item.done = e.target.checked
          }
        })
      }
    }
}
</script>

<style scoped>
.shopping-list {
  margin: 10px;
  width: 95%;
  box-sizing: border-box;
  padding: 10px 10px 0 10px;
}
.list-header {
  line-height: 50px;
  font-size: 20px;
  font-weight: bold;
}
.list-header input {
  margin-right: 10px;
}
.list-item {
  height: 100px;
  display: flex;
  align-items:flex-start;
}
.item-checkbox {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #FD7722;
  color: #fff;
  margin-right: 10px;
}
.item-container {
  box-shadow: 0 4px 4px rgba(9,2,4,.55);
  width: 300px;
  border-bottom: 1px solid #ccc;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
}
.item-content {
  display: flex;
  align-items: center;
}
.item-img {
  margin-left: 4px;
  width: 50px;
  height: 50px;
  /* background-image: url(); */
  background-color: #ED7B51;
  background-size: 100%;
  background-repeat: no-repeat;
  border-radius: 50%;
  margin-right: 10px;
}
.item-info {
  width: 100px;
  height: 80px;
  font-size: 15px;
  position: relative;
}
.info-name {
  font-weight: bold;
  position: absolute;
  top: 10px;
}
.info-number {
  color: #ECBA95;
  font-size: 12px;
  position: absolute;
  top: 30px;
}
.info-price {
  color: #ED7B51;
  font-size: 10px;
  position: absolute;
  bottom: 10px;
}
.item-calculate{
  margin-top: 10px;
  margin-right: 5px;
}
.info-price span {
  font-size: 15px;
}
.calculate-dec{
  font-weight: bold;
  color: #108EE9;
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 18px;
  text-align: center;
  border-radius: 50%;
  border: 1px solid #108EE9;
  font-size: 18px;
}
.calculate-inc {
  font-weight: bold;
  color: #FFFFFF;
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 18px;
  text-align: center;
  border-radius: 50%;
  border: 1px solid #108EE9;
  font-size: 18px;
  background-color: #108EE9;
}
.calculate-count {
  display: inline-block;
  width: 40px;
  height: 10px;
  text-align: center;
  line-height: 10px;
}
</style>